import * as React from 'react';
import {
  StyleSheet,
  TouchableOpacity,
  Text,
  View,
  Appearance,
} from 'react-native';
import {dark, light} from '../../config';
import {pxToDp} from '../../utils/stylesKits';
import {Icon} from '@ant-design/react-native';

/**
 * APP Cell 页面
 * @colorScheme 用户手机主题模式 是否开启了黑夜模式
 * */
const colorScheme = Appearance.getColorScheme() === 'dark' ? dark : light;

function Cell(props) {
  const {style, icon, label, children, onClick} = props;
  return (
    <TouchableOpacity
      style={{...styles.container, ...style}}
      onPress={() => onClick()}>
      <View style={styles.icon}>{icon}</View>
      <Text style={styles.label}>{label}</Text>
      <View style={styles.value}>{children}</View>
      <Icon name="right" color={colorScheme.color} size={pxToDp(18)} />
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  container: {
    width: '100%',
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'space-between',
    padding: pxToDp(15),
  },
  icon: {
    marginRight: pxToDp(10),
  },
  label: {
    flex: 1,
    fontSize: pxToDp(16),
    fontWeight: '700',
  },
  value: {
    maxWidth: '50%',
    marginRight: pxToDp(10),
  },
});
export default Cell;
